<template>
  <div class="orderItem">
    <a-row type="flex" class="orderBody">
      <a-col span="24">
        <a-row type="flex" class="hdRow">
          <a-col span="1">
            <div class="open" v-if="order.goods && order.goods.length > 1" @click.stop="is_open = !is_open">
              <span v-if="is_open">-</span>
              <span v-else>+</span>
            </div>
          </a-col>

          <a-col span="23">
            <div class="hdCon">
              <a-tooltip>
                <template slot="title"> 双击复制 </template>
                <em class="orderNo" @dblclick="copyText(order.line_no)">投篮号：{{ order.line_no }}</em>
              </a-tooltip>
              <em>收货信息：{{ order.store_name }}</em>
              <em>{{ order.store_tel }}</em>
              <em>地址：{{ order.store_addr }}</em>
            </div>
          </a-col>
        </a-row>
      </a-col>

      <a-col span="1"> </a-col>

      <template v-for="(item, index) in list_th">
        <a-col :key="item.type" :span="item.span" v-if="item.type == 'name'">
          <div class="goodsInfo" v-for="(good, goodIndex) in is_open ? order.goods : [order.goods[0]]" :key="goodIndex">
            <a-avatar :src="good.goods_logo" shape="square" :size="48" icon="user" />
            <div class="info">
              <a-tooltip style="width: 100%">
                <template slot="title"> {{ good.goods_name }}</template>
                <span class="goodName">{{ good.goods_name }}</span>
              </a-tooltip>
              <a-tooltip style="width: 100%" v-if="good.goods_attr_name">
                <template slot="title"> {{ good.goods_attr_name }}</template>
                <span class="attrName">{{ good.goods_attr_name }}</span>
              </a-tooltip>
            </div>
          </div>
        </a-col>

        <a-col :key="index" :span="item.span" v-if="item.type == 'count'">
          <div class="count">
            <div class="m-box" v-for="(good, goodIndex) in is_open ? order.goods : [order.goods[0]]" :key="goodIndex">
              <span>×{{ good.goods_num }}</span>
            </div>
          </div>
        </a-col>

        <a-col :key="index" :span="item.span" v-if="item.type == 'status'">
          <div class="m-box">
            <div class="orderStatus">
              <div class="status">
                <span :style="{ backgroundColor: getStatus[1] }"></span>
                <span>{{ getStatus[0] }}</span>
              </div>
            </div>
          </div>
        </a-col>

        <a-col :key="index" :span="item.span" v-if="item.type == 'created_at'">
          <div class="m-box">
            <span>
              {{ order.finish_time > 0 ? $moment(order.finish_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span
            >

            <a-button type="link" @click="$emit('handle', 'Print', order)">打印</a-button>
          </div>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      default: () => {
        return {}
      },
    },

    list_th: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  data() {
    return {
      is_open: false,
    }
  },

  computed: {
    getStatus() {
      let text, color
      switch (this.order.status) {
        case '0':
          text = '待配送'
          color = '#FAAD14'
          break

        case '1':
          text = '已完成'
          color = '#69CC20'
          break

        case '101':
          text = '配送中'
          color = '#1890FF'
          break
      }
      return [text, color]
    },
  },

  mounted() {
    console.log('this.order', this.order)
  },

  methods: {
    copyText(data) {
      if (!data) return
      this.$copyText(data)
        .then((e) => {
          this.$message.success('复制成功')
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('复制失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.orderItem {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.orderBody {
  display: flex;
  /* align-items: center; */
  // padding: 16px;
  background-color: #fff;
  .open {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    width: 16px;
    height: 16px;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.149);

    span {
      position: relative;
      top: -1px;
    }
  }
  .goodsInfo {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 17px 0 17px 15px;
    img {
      width: 48px;
      min-width: 48px;
      height: 48px;
      border-radius: 4px;
    }
    .info {
      flex: auto;
      display: flex;
      width: 0;
      flex-direction: column;
      margin-left: 24px;
      .goodName,
      .attrName {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .goodName {
        color: rgba(0, 0, 0, 0.85);
      }
      .attrName {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
  .goodsInfo:last-child {
    margin-bottom: 0;
  }
  .count {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    text:nth-child(1) {
      margin-bottom: 10px;
    }
    margin-bottom: 15px;
  }
  .count:last-child {
    margin-bottom: 0;
  }

  .orderStatus {
    .status {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      span:nth-child(1) {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}

.m-box {
  display: flex;
  align-items: center;
  height: 100%;
}

.count {
  height: 100%;
}

.hdRow {
  padding: 19px 0;
  background: #fafafa;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
}

.hdCon {
  display: flex;
  flex-wrap: wrap;
  margin-top: -3px;

  em {
    vertical-align: top;
    margin-left: 15px;
    font-style: normal;
    font-size: 14px;
  }
}

.orderNo {
  cursor: pointer;
}
</style>
